<script setup lang='ts'>
// 自定义 规则
//interface Props {
//}

import { onMounted, ref, reactive, defineProps } from 'vue';
import Bottom from '@/components/Bottom/index.vue'
import { navigateTo } from '@/public';
const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    },
    className: {
        type: String,
        default: () => ''
    }
});

/**
 * @property 变量
 */


/**
 * @property  所有请求以api开头 如:apiDataInfo
 * / 


/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */


/**
 * @property 内置方法
 */


</script>
<template>
    <div class="w-[100%] flex" :class="className">
        <img src="/static/setMenu/shopping.svg" alt=""
            class="w-160 h-160 b-rd-1">
        <div class="ml-3.5 fcb flex-1">
            <text class="font-size-28 fw500">套餐name</text>
            <text class="font-size-24 fw400 c-[#777777]">90天租赁套餐</text>
            <div class="flex frb">
                <div class="fre">
                    <text class="c-[#00BD78] font-size-48 fw-500" style="line-height: 40rpx;">¥119</text>
                    <text class="c-[#A7A7A7] font-size-24">/总费用</text>
                </div>
                <div class="w-164 h-56 ml-3.5">
                    <Bottom text="立即租赁" @click="navigateTo('/subPackages/package/detail?type=prestore')" />
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped></style>